<template>
  <view class="uni-wrap">
    <view class="top-wrap">
      <view class="logo-wrap">
        <image class="logo" src="/static/logo.png" />
      </view>
      <text class="name">管理系统</text>
    </view>

    <view class="login-form">
      <uni-forms :border="true" :modelValue="loginFormData">
        <uni-forms-item label="账号" :label-width="90">
          <uni-easyinput
            v-model="loginFormData.username"
            :inputBorder="false"
            placeholderStyle="font-size: 14px"
            placeholder="请输入账号"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="密码" :label-width="90">
          <uni-easyinput
            type="password"
            v-model="loginFormData.password"
            :inputBorder="false"
            placeholderStyle="font-size: 14px"
            placeholder="请输入密码"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="验证码" :label-width="90">
          <view class="extra-content">
            <uni-easyinput
              v-model="loginFormData.code"
              :inputBorder="false"
              placeholderStyle="font-size: 14px"
              placeholder="请输入验证码"
            ></uni-easyinput>
            <image class="code-img" :src="codeUrl" @click="getCodeImg" />
          </view>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="login-action">
      <button type="primary" @click="toLogin" :disabled="!isFinish">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      codeUrl: "",
      loginFormData: {
        username: "",
        password: "",
        code: "",
        uuid: ""
      }
    };
  },
  onLoad() {
    this.getCodeImg();
  },
  computed: {
    isFinish() {
      return (
        !!this.loginFormData.username &&
        !!this.loginFormData.password &&
        !!this.loginFormData.code
      );
    }
  },
  methods: {
    getCodeImg() {
      this.$get("/captchaImage", {}).then(res => {
        console.log("captchaImage res=======", res);
        if (res.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginFormData.uuid = res.uuid;
        }
      });
    },
    toLogin() {
      console.log("this.loginFormData", this.loginFormData);
      let that = this;
      uni.showLoading({
        title: "登录中...."
      });
      this.$post("/login", this.loginFormData).then(res => {
        console.log("login res=======", res);
        uni.hideLoading();
        if (res && res.code == 200) {
          uni.showToast({
            title: "登录成功",
            icon: "success",
            success: function() {
              uni.setStorageSync("token", res.token);

              that.getInfo();
            }
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            success: function(e) {
              console.log("eeeeeeee", e);
              that.getCodeImg();
            }
          });
        }
      });
    },

    getInfo() {
      this.$get("/getInfo", {}).then(res => {
        if (res && res.code == 200) {
          uni.setStorageSync("userInfo", res.user);
          uni.setStorageSync("userPermissions", res.permissions);
          //跳转到首页tab菜单要用switchTab
          uni.switchTab({
            url: "/pages/index/index"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.uni-wrap {
  // background-color: $uni-color-primary;
  background-color: #fff;
  .top-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80rpx 0;
    border-bottom: 1rpx #eee solid;
    .logo-wrap {
      // padding: 24rpx 28rpx;
      // background-color: #f8f2f1;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 16rpx;
      .logo {
        width: 124rpx;
        height: 124rpx;
      }
    }
    .name {
      color: #333;
      font-weight: bold;
      font-size: 36rpx;
    }
  }

  .login-form {
    padding: 0 24rpx;
    border-bottom: 1rpx solid #eee;
    .extra-content {
      display: flex;
      align-items: center;
      .code-img {
        width: 200rpx;
        height: 60rpx;
      }
    }
  }

  .login-action {
    margin: 50rpx 24rpx;
  }
}
</style>
